<template>

  <div class="login_wrapper">
    <div class="login">
      <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px" class="ms-content">
        <el-form-item>
          <h2 class="title">后台管理系统</h2>
        </el-form-item>
        <el-form-item prop="username">
          <!--<div v-if="loginForm.username.length>0">用户名</div>-->
          <el-input :class="{'input-in':loginForm.username.length>0}" @blur="checkName"
                    v-model="loginForm.username" placeholder="用户名"
                    @keyup.enter.native="submitForm()"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <!--<div v-if="loginForm.password.length>0">密码</div>-->
          <el-input :class="{'input-in':loginForm.password.length>0}" type="password"
                    v-model="loginForm.password" placeholder="密码"
                    @keyup.enter.native="submitForm()"></el-input>
        </el-form-item>

        <!--<el-form-item>-->
          <!--<el-checkbox class="f-l color-dark" v-model="loginForm.checked">记住账号</el-checkbox>-->
          <!--<div class="f-r color-dark focus-pointer" @click="findPsd">忘记密码</div>-->
        <!--</el-form-item>-->

        <el-form-item>
          <el-button type="primary" :class="['', {'btn-active':loginForm.username.length>0}]"
                     :disabled="loginForm.username.length===0"
                     :loading="loading"
                     @click="submitForm()">登录
          </el-button>
          <!--<el-button class="register">注册</el-button>-->
          <span class='error' v-show="this.errorInfo.isShowError"> {{this.errorInfo.text}} </span>
        </el-form-item>
      </el-form>

    </div>
    <p class="bei">
      CopyRight @ 2019 陕西佳之易网络科技有限公司 版权所有
    </p>
  </div>
</template>

<script>
  import {UPDATE_TOKEN} from '../../store/components/consts'

  export default {
    data: function () {
      return {
        loginForm: {
          username: 'admin',
          password: '123456',
          checked: ''
        },
        loginRules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'change'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'change'},
            {pattern: /^.{4,16}$/, message: '密码长度4~16位', trigger: 'change'}
          ]
        },
        errorInfo: {
          text: '登陆失败,请重试',
          isShowError: false //显示错误提示
        },
        loading: false,
      }
    },
    created() {
      let userName = localStorage.getItem('SET_TOKEN');
      if (userName) {
        this.loginForm.username = userName;
        this.loginForm.checked = true;
      }
    },
    methods: {
      checkName() {
        // 用户名验证
        // console.log(this.loginForm.username);
        // if(this.loginForm.username=='operator'||this.loginForm.username=='admin'){
        //     this.checkNameShow=false;
        // }else{
        //     this.checkNameShow=true;
        // }
      },
      submitForm() {
        this.$refs['loginForm'].validate((valid) => {
          if (!valid) {
            return false;
          }

          this.loading = true;
          //调用后端登陆接口
          this.$postFetch(this.$api.mngLogin, this.loginForm).then(response => {
            let res = response.data;
            if (res.code !== 1) {
              // this.$message.error(res.msg);
              this.errorInfo.text = res.msg;
              this.errorInfo.isShowError = true;
              this.loading = false;
              return;
            }

            this.$common.setSessionStorage(UPDATE_TOKEN, res.data.userInfo.token);
            this.$common.setSessionStorage('username', res.data.userInfo.userName);
            // this.$common.setSessionStorage('avatar', res.data.userInfo.avatar);
            this.$common.setSessionStorage('lev', res.data.sysRoleVoList);

            this.$store.commit(UPDATE_TOKEN, res.data.userInfo.token);
            //存入菜单,渲染菜单
            this.$store.dispatch("add_Menus", res.data.sysMenuVoList);
            //动态设置路由
            this.$store.dispatch("add_Routes", res.data.sysMenuVoList);

            // this.$message.success('登录成功');
            this.$router.replace({path: "/"});
            this.loading = false;

          }).catch((err) => {
            console.log('error:', err);
            this.errorInfo.isShowError = true;
            this.errorInfo.text = '系统接口异常';
            this.loading = false;
          });

        });
      },
      findPsd() {
        console.log('找回密码');
      }
    }
  }
</script>
<style lang="scss" scoped>
  $input_width: 300px;

  .login-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .login-btn {
    text-align: left;
    margin-top: 45px;

    .el-button {
      width: 120px;
      height: 40px;
      line-height: 40px;
      padding: 0;
      border: 1px solid #3751FE;
    }

  }


  .register {
    border: 1px solid #3751FE;
    border-radius: 3px;
    margin-left: 20px;
  }

  .login_wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .login {
      width: 460px;
      height: 296px;
      margin-top: -150px;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;

      .title {
        text-align: center;
        color: #505458;
      }

      .el-form-item__content {
        width: $input_width;
      }

      .el-button {
        width: $input_width;
      }

      .el-form {
        margin: 30px 80px auto 80px;

        .error {
          display: block;
          text-align: center;
          color: red;
        }
      }
    }
  }

  .bei {
    position: absolute;
    bottom: 20px;
    cursor: pointer;
    color: #505458;
  }
</style>
